<template>
  <div id="userMana" class="globals">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名111:">
        <el-input v-model="formInline.realName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="部门:">
        <el-input v-model="formInline.department" placeholder="请输入"></el-input>
      </el-form-item>
       <el-form-item label="角色:" prop="roleId">
          <el-select
            v-model="formInline.roleId"
            collapse-tags
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="small" @click="resetSearch">重置</el-button>
        <el-button
          type="primary"
          size="small"
          @click="searchFn"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <div class="userMana_table_box globals_table_box">
      <div class="table_header">
        报表列表
        <div>
          <el-button type="primary" size="small" @click="addXian"
            ><i class="el-icon-plus"></i>新增</el-button
          >
        </div>
      </div>
      <div class="table_flex">
        <el-table
          :data="tableData"
          class="userMana_table globals_table"
          :show-overflow-tooltip="true"
          style="width: 100%"
        >
          <el-table-column
            prop="cedata"
            label="姓名"
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            prop="cedata"
            label="域账号"
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            prop="cedata"
            label="角色"
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            prop="cedata"
            label="岗位"
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            prop="cedata"
            label="部门 "
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            label="邮箱"
            prop="cedata"
            :show-overflow-tooltip="true"
            
          >
          </el-table-column>
          <el-table-column
            label="状态"
            :show-overflow-tooltip="true"
            prop="cedata"
            
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #666a7a"
                v-if="scope.row.cedata"
                size="small"
                ><span
                  style="
                    height: 6px;
                    width: 6px;
                    background: #54d8a6;
                    display: inline-block;
                    border-radius: 3px;
                    margin-right: 5px;
                  "
                ></span
                >正常</el-button
              >
              <el-button
                v-if="!scope.row.cedata"
                type="text"
                style="color: #666a7a"
                size="small"
                ><span
                  style="
                    height: 6px;
                    width: 6px;
                    background: #cccccf;
                    display: inline-block;
                    border-radius: 3px;
                    margin-right: 5px;
                  "
                ></span
                >禁用</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <el-button @click="editCont(scope)" type="text" size="small">
                <img
                  style="height: 15px; width: 14px; margin-bottom: -3px"
                  src="../static/edit.png"
                  alt=""
                />
                编辑</el-button
              >
              <el-button
                @click="delCont(scope)"
                type="text"
                style="color: red"
                size="small"
              >
                <img
                  style="height: 14px; width: 14px; margin-bottom: -2px"
                  src="../static/del.png"
                  alt=""
                />
                禁用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize"
            background
            layout=" prev, pager, next,slot, jumper"
            :total="total"
          >
            <div class="num_pager">10条/页</div>
          </el-pagination>
        </div>
      </div>
    </div>
    <adduser
      v-if="addshow"
      :datas="datas"
      :judjeCont="judjeCont"
      @addyin="addyinFn"
    ></adduser>
    <delconfirm v-if="centerDialogVisible" @delconf="delconf"></delconfirm>
  </div>
</template>

<script>
// import delconfirm from "../components/delConfirm/del.vue";
// import adduser from "../components/userMana/addUser.vue";
// import { getUserList, delUserFn,getRoleList } from "../apis.js";
export default {
  // components: {
  //   adduser,
  //   delconfirm,
  // },
  data() {
    return {
      // 删除确认
      centerDialogVisible: false,
      ////组件显隐
      addshow: false,
      // 组件是增加 修改或编辑
      judjeCont: "",
      // 要修改项的值
      datas: "",
      // 当前修改项下表
      index: "",
      ////表单数据
      formInline: {
        realName: "",
        department:"",
        roleId: "",
      },
      // 下拉角色信息
      options:[],
      ////分页
      queryForm: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      ////表格数据
      tableData: [
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
        {cedata:"测试数据"},
      ],
    };
  },
  methods: {
    ////表单方法
    // 组件显示
    addXian() {
      this.addshow = true;
      this.judjeCont = "新增";
      this.datas = "";
    },
    // 组件隐藏
    addyinFn() {
      this.addshow = false;
      // 重新刷新数据
      setTimeout(() => {
        this.getList()
      }, 500);
      
    },
    // 获取角色列表
    async getRole() {
      let roleList = await getRoleList({
        pageNo: 0,
        pageSize: 100,
      }).then((res) => {
        console.log("查看角色列表", res);
        this.options = res.list;
      });
      // console.log("查看角色列表", roleList);
    },
    //重置搜索表单
    resetSearch() {
      console.log(1);
      this.formInline= {
        realName: "",
        department:"",
        roleId: [],
      }
    },
    // 搜索指定数据
    searchFn(){
      this.queryForm.pageNo=1
      getUserList({
        realName: this.formInline.realName||null,
        department:this.formInline.department||null,
        roleId: this.formInline.roleId||null,
        pageNo: this.queryForm.pageNo,
        pageSize: this.queryForm.pageSize,
      }).then((response) => {
        console.log("检查搜索数据", response);
        this.tableData = response.list;
        this.total = Number(response.total);
      });
    },
    ////表格方法
    // 删除当前项
    delCont(scope) {
      this.centerDialogVisible = true;
      console.log(scope);
      this.index = scope.$index;
    },
    // 根据选择确定删除或取消
    delconf(demo) {
      console.log("是否确定删除", demo);
      if (demo) {
        // this.tableData.splice(this.index, 1);
        this.centerDialogVisible = false;
        let userId=this.tableData[this.index].id
        console.log(userId,'要删除的id');
        delUserFn({ userId }).then(() => {
          this.$message({
            message: "禁用成功",
            type: "warning",
          });
          this.getList();
        });
      }
      if (!demo) {
        this.centerDialogVisible = false;
        this.$message({
          message: "取消删除",
          type: "warning",
        });
      }
    },
    // 点击编辑弹出编辑页面
    editCont(scope) {
      console.log(scope);
      this.addshow = true;
      this.judjeCont = "编辑";
      this.datas = scope;
    },
    // 获取当前页数据
    getList() {
      getUserList({
        realName: this.formInline.realName||null,
        department:this.formInline.department||null,
        roleId: this.formInline.roleId||null,
        pageNo: this.queryForm.pageNo,
        pageSize: this.queryForm.pageSize,
      }).then((response) => {
        console.log("检查一下数据", response);
        this.tableData = response.list;
        this.total = Number(response.total);
        console.log(this.total,"检查数据");
      });
    },
    ////分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo=val
      this.getList()

    },
  },
  created() {
    // 获取表格数据
    // this.getList();
    // 获取角色列表
    // this.getRole()
  },
};
</script>

<style scoped>
#userMana {
  height: calc(100vh - 20px);
  box-sizing: border-box;
  background: #eff3f7;
}
</style>
